<template>
    <div>
        <div class="tree-box">
            <el-tree :data="categoryTreeList" :props="categoryProps" show-checkbox node-key="categoryId"
                :expand-on-click-node="false" :default-expand-all="false" :default-expanded-keys="treeExpandedKeys">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ node.label + data.level }}</span>
                    <span>
                        <el-button v-if="data.level < 2" type="text" size="mini" @click="() => append(data)">
                            添加子分类
                        </el-button>
                        <el-button type="text" size="mini" @click="() => handleUpdate(data)">
                            修改
                        </el-button>
                        <el-button v-if="!data.children & data.status == 0" type="text" size="mini"
                            @click="() => remove(data)">
                            删除
                        </el-button>
                    </span>
                </span>
            </el-tree>
        </div>

        <el-dialog :title="isUpdate ? '分类修改' : '添加分类'" :visible.sync="dialogFormVisible">
            <el-form :model="categoryForm">
                <el-form-item v-if="!isUpdate">
                    <el-radio v-model="currentData.level" :label="0">一级分类</el-radio>
                    <el-radio v-model="currentData.level" :label="1">二级分类</el-radio>
                    <el-radio v-model="currentData.level" :label="2">三级分类</el-radio>
                </el-form-item>
                <el-form-item>
                    <!-- 一级分类列表 -->
                    <el-select v-if="currentData.level > 0" v-model="currentData.firstId" placeholder="请选择">
                        <el-option v-for="item in firstList" :key="item.categoryId" :label="item.name"
                            :value="item.categoryId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <!-- 二级分类列表 -->
                    <el-select v-if="currentData.level > 1" v-model="currentData.sencodId" placeholder="请选择">
                        <el-option v-for="item in sencodList" :key="item.categoryId" :label="item.name"
                            :value="item.categoryId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类名称">
                    <el-input v-model="categoryForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="分类描述">
                    <el-input v-model="categoryForm.desc" autocomplete="off"></el-input>
                </el-form-item>
                <!-- <el-form-item label="分类图标" :label-width="formLabelWidth">
                    <el-input v-model="categoryForm.icon" autocomplete="off" readonly></el-input>
                </el-form-item>
                <el-form-item label="分类图片" :label-width="formLabelWidth">
                    <el-input v-model="categoryForm.imgUrl" autocomplete="off" readonly></el-input>
                </el-form-item> -->
                <el-form-item label="分类序号">
                    <el-input v-model="categoryForm.seq" type="number" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import {
    tree_list, category_del, category_level_list,
    category_children_list, category_save, category_update, category_by_id, category_parent
} from '@/api/product/category'
import { mapState } from 'vuex';
export default {
    //import引入组件才能使用
    components: {},
    props: {},
    data() {
        return {
            categoryProps: {
                label: 'name',
                children: 'children'
            },
            dialogFormVisible: false,
            treeExpandedKeys: [],
            categoryTreeList: [],
            isUpdate: false,
            categoryForm: {},
            currentData: {
                level: 0,
                firstId: 0,
                sencodId: 0,
            },
            currentLevel: 0,
            firstList: [],
            sencodList: []

        };
    },
    // 计算属性
    computed: {
        ...mapState("user", ['shopId'])
    },
    // 监听data中的数据变化
    watch: {
        'currentData.level': function (val) {
            this.getSelectList()
            this.$forceUpdate()
        },
        'currentData.firstId'() {
            this.getChildrenList()
            this.$forceUpdate()
        },

    },
    // 方法集合
    methods: {
        init() {
            tree_list().then(res => {
                this.categoryTreeList = res.data
            })
        },
        remove(data) {
            category_del(data.categoryId).then(res => {
                this.treeExpandedKeys = [data.parentId]
                this.init()
            })
        },
        append(data) {
            this.currentData = {
                level: 0,
                firstId: 0,
                sencodId: 0,
            }
            this.isUpdate = false
            this.currentData.level = data.level + 1
            if (this.currentData.level > 0) {
                this.currentData.firstId = data.categoryId
            }
            console.log(data)
            if (this.currentData.level > 1) {
                this.currentData.firstId = data.parentId
                this.currentData.sencodId = data.categoryId
            }
            this.getSelectList()
            this.dialogFormVisible = true
            this.$forceUpdate()
        },
        getSelectList() {
            if (this.currentData.level > 0) {
                category_level_list(0).then(res => {
                    this.firstList = res.data
                })
                if (this.currentData.level > 1) {
                    this.getChildrenList()
                }
            }
        },
        getChildrenList() {
            category_children_list(this.currentData.firstId).then(res => {
                this.sencodList = res.data
                if (!this.isUpdate) {
                    if (this.currentData.sencodId == 0) {
                        this.currentData.sencodId = res.data[0].categoryId
                        this.currentData.firstId = res.data[0].parentId
                    }
                }
            })
        },
        handleSubmit() {
            if (this.currentData.level == 0) {
                this.categoryForm.parentId = 0
            }
            if (this.currentData.level == 1) {
                this.categoryForm.parentId = this.currentData.firstId
            }
            if (this.currentData.level == 2) {
                this.categoryForm.parentId = this.currentData.sencodId
            }
            this.categoryForm.level = this.currentData.level
            this.categoryForm.shopId = this.shopId
            if (this.isUpdate) {
                category_update(this.categoryForm).then(res => {
                    this.dialogFormVisible = false
                    this.treeExpandedKeys = [this.categoryForm.parentId]
                    this.init()
                })
            } else {
                this.categoryForm.categoryId = null
                category_save(this.categoryForm).then(res => {
                    this.dialogFormVisible = false
                    this.treeExpandedKeys = [this.categoryForm.parentId]
                    this.init()
                })
            }
        },
        handleUpdate(data) {
            this.isUpdate = true
            category_by_id(data.categoryId).then(res => {
                this.categoryForm = res.data
                this.currentData.level = res.data.level
                if (this.currentData.level == 1) {
                    this.currentData.firstId = res.data.parentId
                }
                if (this.currentData.level == 2) {
                    this.currentData.sencodId = res.data.parentId
                    category_parent(res.data.parentId).then(res => {
                        this.currentData.firstId = res.data.parentId
                        this.getSelectList()
                    })
                }
            })
            this.dialogFormVisible = true
            this.$forceUpdate()
        }
    },
    // 生命周期，创建完成时（可以访问当前this实例）
    created() {
        this.init()
    },
    // 生命周期：挂载完成时（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { },//生命周期：创建之前
    beforeMount() { },//生命周期：挂载之前
    beforeUpdate() { },//生命周期：更新之前
    updated() { },//生命周期：更新之后
    beforeDestroy() { },//生命周期：销毁之前
    destroyed() { },//生命周期：销毁完成
    activated() { },//如果页面有keep-alive缓存功能，这个函数会触发执行
}
</script>
<style scoped>
.tree-box {
    width: 90%;
    margin: 0 auto;
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>@/api/product/category